<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <style>
        .layui-form-selectup dl {
            top: 42px;
            bottom: unset;
        }
    </style>
</head>
<body>

<form class="layui-form" action="" id="queryform">

    <div class="layui-inline">
        <label class="layui-form-label">关键字</label>
        <div class="layui-inline">
            <input type="text" name="keyword" autocomplete="off" class="layui-input" placeholder="请输入员工姓名">
        </div>
    </div>


    <div class="layui-inline">
        <label class="layui-form-label">部门</label>
        <div class="layui-inline">
            <select name="deptid" lay-filter="deptid">
                <option value="-1" selected>全部</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
    </div>
</form>

<!--form2-->
<form class="layui-form" id="emform" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">员工名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required|name" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">员工邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" lay-verify="required|email" placeholder="请输入员工邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" lay-verify="required|age" placeholder="请输入员工年龄" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">员工角色</label>
        <div class="layui-input-block">
            <input type="text" name="role"  placeholder="请输入员工角色" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="deptid" lay-filter="deptid">
            </select>
        </div>
    </div>
</form>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchdelete">批量删除</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="import" id="importbtn">导入</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="export">导出</button>
    </div>
</script>

<table class="layui-hide" id="emtable" lay-filter="emtable"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/javascript">

    layui.use(['table','jquery','layer','form','upload'],function () {
        var table=layui.table;
        var $=layui.jquery;
        var layer=layui.layer;
        var form=layui.form;
        var upload=layui.upload;
        table.render({
            elem: '#emtable'
            , url: '/employee/list'
            , toolbar:'#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar:[]
            , title: '员工数据表'
            , cols: [
                [
                {type:'checkbox'},
                {type: 'numbers', title: '编号',align: 'center'}
                ,{field: 'name', title: '员工名', edit: 'text',align: 'center'}
                ,{field: 'email', title: '邮箱', edit: 'text',align: 'center'}
                ,{field: 'age', title: '年龄', edit: 'text',align: 'center'}
                ,{field: 'dept',title: '部门',align: 'center',templet:function (d) {
                    var res='';
                    if (d.dept!=null){
                        res=d.dept.name;
                    }
                        return res;
                    }}
                ,{field: 'role', title: '角色', edit: 'text',align: 'center'}
                ,{field: 'right' ,title: '操作', toolbar:'#barDemo',align: 'center'}

            ]
            ]
            ,request:{
                pageName: 'currentPage',
                limitName: 'PageSize'
            }
            ,parseData:function (res) {
                return{
                    "code":0,
                    "msg":res.msg,
                    "count":res.data.totalConut,
                    "data":res.data.data
                }
            }
            ,page:true

        });

        // 部门下拉方法
        function deptSelectRender(formid,did){
            $.ajax({
                url:'/department/list',
                type: 'get',
                dataType:'json',
                success:function (res) {
                    var data=res.data;
                    $.each(data,function (index,el) {
                        if(did==el.id){
                            var node='<option selected value="'+el.id+'">'+el.name+'</option>';
                            $("#"+formid).find('select').append(node);
                        }else {
                            var node='<option value="'+el.id+'">'+el.name+'</option>';
                            $("#"+formid).find('select').append(node);
                        }
                    });
                    form.render('select')
                }
            })
        };

        deptSelectRender("queryform",null);


        // 查询提交
        form.on('submit(query)',function (data) {
            table.reload('emtable',{
                where:data.field,
                page:{
                    curr:1,
                }
            })
            return false;
        })

        //表单验证
        form.verify({
            name:function (value,item) {
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }
        })

        // var arryids=new Array();
        // table.on('checkbox(emtable)',function (obj) {
        //     console.log(obj.data);
        //     var emid=obj.data.id;
        //     arryids.push(emid);
        // })

        // toolbar
        table.on('toolbar(emtable)',function (obj) {
            var layevent=obj.event;
            var checkStatus=table.checkStatus('emtable');
            if(layevent=="batchdelete"){
                if(checkStatus.data.length>0){
                    var arryids=new Array();
                    $.each(checkStatus.data,function (index,el) {
                        arryids.push(el.id);
                    })

                    $.ajax({
                        url:'/employee/batchdelete',
                        type:'post',
                        traditional:true,
                        data:{
                            "ids":arryids,
                        },
                        dataType: 'json',
                        success:function (res) {
                            layer.msg(res.msg);
                            table.reload('emtable',{
                                page:{
                                    curr:1,
                                }

                            });
                        }
                    })
                }
            }

            if(layevent=="imput"){
                upload.render({
                    elem:'#importbtn',
                    url:'/employee/import',
                    accept:'file',
                    exts:'xls|xlsx',
                    field:'pic',
                    done:function (res,index,upload) {
                        console.log(res);
                        if (res.success){
                            table.reload('emtable',{
                                page:{
                                    curr:1,
                                }
                            })
                        }
                    }
                })
            }

            if(layevent=="export"){
                window.location.href="/employee/export?"+$("#queryform").serialize();
            }

            if(layevent=="add"){
                layer.open({
                    title:'新增员工信息',
                    traditional:true,
                    contentType: "application/json",
                    type:1,
                    content:$("#emform"),
                    area:['500px','450px'],
                    btn: ['保存','重置'],
                    btn1:function () {
                        var name = $("#emform").find("input[name='name']").val();
                        var email = $("#emform").find("input[name='email']").val();
                        var age = $("#emform").find("input[name='age']").val();
                        var role = $("#emform").find("input[name='role']").val();
                        var deptid=$("#emform").find("select").val();

                        $.ajax({
                            url:'/employee/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "name":name,
                                "email":email,
                                "age":age,
                                "role":role,
                                "deptid":deptid,
                            },
                            success:function (res) {
                                if(res.success){
                                    layer.closeAll('page');
                                    layer.msg(res.msg);
                                    $("#emform").find("input").val('');
                                    $("#emform").find("select").empty();
                                    table.reload('emtable',{});

                                }

                            }
                        })
                    },
                    btn2:function () {
                        $("#emform").find("input").val('');
                        $("#emform").find("select").reset();
                    },
                    success:function () {
                        var node='<option value="-1" selected>全部</option>';
                        $("#emform").find('select').append(node);
                        deptSelectRender("emform",null);
                        $("#emform").find("input").val('');
                    },
                    cancel:function () {
                        $("#emform").find("input").val('');
                        $("#emform").find("select").empty();


                    }
                })
            }
        })

        // tool
        table.on('tool(emtable)',function (obj) {
            var layevent=obj.event;
            var data=obj.data;
            var tr=obj.tr;
            if(layevent=="del"){
                $.ajax({
                    url:'/employee/delete',
                    type:'post',
                    dataType:'json',
                    data:{
                        "id":data.id,
                    },

                    success:function (res) {
                        layer.msg(res.msg);
                        $(tr).remove();
                    }
                })
            }

            if(layevent=="edit"){
                layer.open({
                    title:"编辑员工信息",
                    type:1,
                    content:$("#emform"),
                    area:['500px','300px'],
                    btn:['保存','重置'],
                    btn1:function () {
                        $.ajax({
                            url:'/employee/upOrin',
                            type:'post',
                            dataType:'json',
                            data:{
                                "id":data.id,
                                "name":$("#emform").find('input[name="name"]').val(),
                                "email":$("#emform").find('input[name="email"]').val(),
                                "age":$("#emform").find('input[name="age"]').val(),
                                "role":$("#emform").find('input[name="role"]').val(),
                                "deptid":$("#emform").find('select[name="deptid"]').val(),
                            },
                            success:function (res) {
                                layer.closeAll('page');
                                layer.msg(res.msg);
                                $("#emform").find('input').val('');
                                $("#emform").find('select[name="deptid"]').empty();
                                table.reload('emtable',{});
                            }
                        })
                    },
                    btn2:function(){
                        $("#emform").find('input[name="name"]').val(data.name);
                        $("#emform").find('input[name="email"]').val(data.email);
                        $("#emform").find('input[name="age"]').val(data.age);
                        $("#emform").find('input[name="role"]').val(data.role);

                        $("#emform").find('select[name="deptid"]').empty();
                        deptSelectRender("emform",data.dept.id);
                    },
                    success:function () {
                        $("#emform").find('input[name="name"]').val(data.name);
                        $("#emform").find('input[name="email"]').val(data.email);
                        $("#emform").find('input[name="age"]').val(data.age);
                        $("#emform").find('input[name="role"]').val(data.role);
                        deptSelectRender("emform",data.dept.id);
                    }

                })

            }

            if(layevent=="del"){
                $.ajax({
                    url:'/employee/delete',
                    type:'post',
                    dataType:'json',
                    data:{
                        "id":data.id,
                    },

                    success:function (res) {
                        $(tr).remove();
                        layer.msg(res.msg);
                    }
                })
            }
        })

    })
</script>
</body>
</html>